<template>
	<view class="bg">
		<view class="mylist">
			<view class="listBox">
				<view class="topBox">
				<view class="toptxt">
					<view class="city">
						成都
					</view>
					<view class="orderNo">
						V489547865475
					</view>
				</view>
				<view class="toptxt">
					<view class="info">
						<view class="date">
							2019年5月25日出发
						</view>
						<view class="personCount">
							1人
						</view>
					</view>
					<view class="status">
						跟进中
					</view>
				</view>
				</view>
				<image src="../../static/orderStatus.png" mode=""></image>
			</view>
				<view class="listBox">
				<view class="topBox">
				<view class="toptxt">
					<view class="city">
						武汉
					</view>
					<view class="orderNo">
						V489547865475
					</view>
				</view>
				<view class="toptxt">
					<view class="info">
						<view class="date">
							2019年5月25日出发
						</view>
						<view class="personCount">
							1人
						</view>
					</view>
					<view class="status">
						跟进中
					</view>
				</view>
				</view>
				<image src="../../static/orderStatus.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style>
.bg{
	background: #f3f3f3;
	height: 100vh;
	width: 100%;
}
.mylist{
	width: 96%;
	margin: 0 auto;
}
.listBox{
	width: 100%;
	background: #fff;
	border-radius: 10rpx;
	padding: 30rpx 0;
	margin-bottom: 30rpx;
}
.topBox{
	padding: 0 30rpx;
}
.toptxt{
	margin-bottom: 20rpx;
	display: flex;
	justify-content: space-between;
	font-size: 32rpx;
	}
	.toptxt .city{
		font-size: 36rpx;
		font-weight: bold;
	}
	.toptxt .status{
		color: #27d460;
	}
	.toptxt .info{
		display: flex;
		justify-content: flex-start;
	}
	.toptxt .info .date{
		padding-right: 20rpx;
		border-right: 4rpx solid;
		}
	.toptxt .info .personCount{
		padding-left: 20rpx;
	}
	.listBox image{
		width: 100%;
		height: 400rpx;
	}
</style>
